<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <title>小U商城 - 首页</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/index.js"></script>
    <link rel="shortcut icon" href="images/wangye_logo.png" type="image/x-icon">
</head>
<body>
    <!-- 顶部 -->
    <div id="top1">
        <span class="iconfont">&#xe60a;</span>
        <h2>小U商城</h2>
        <p>
            <i class="iconfont">&#xe648;</i>
            <span></span>
            <em class="iconfont">&#xe61c;</em>
        </p>
    </div>
    
    <!-- 头部 -->
    <div id="header_box">
        <!-- 头部上 -->
        <div class="head_top">
            <span class="iconfont">&#xe602;</span>
            <img src="images/logo.jpg" alt="logo">
            <input type="text" class="iconfont" placeholder="&#xe610; 按内容搜索">
            <i class="iconfont">&#xe7f1;</i>
        </div>
        <!-- 导航 -->
        <nav>
            <ul>
                <li>
                    推荐
                    <span></span>
                </li>
                <li>女装</li>
                <li>鞋包</li>
                <li>居家</li>
                <li>母婴</li>
                <li>
                    美妆
                </li>
                <li>
                    <i class="iconfont">&#xe611;</i>
                    美妆
                </li>
            </ul>
        </nav>

    </div>

    <!-- banner -->
    <div id="banner_box">
        <img src="images/banner.jpg" alt="banner">
    </div>

    <!-- 限时秒杀上 -->
    <div id="box2">
        <ul>
            <li>
                <img src="images/icon_1.jpg" alt="">
                <i>限时秒杀</i>
            </li>
            <li>
                <img src="images/icon_2.jpg" alt="">
                <i>畅销商品</i>
            </li>
            <li>
                <img src="images/icon_3.jpg" alt="">
                <i>品质大牌</i>
            </li>
            <li>
                <img src="images/icon_4.jpg" alt="">
                <i>小U自营</i>
            </li>
            <li>
                <img src="images/icon_5.jpg" alt="">
                <i>积分商城</i>
            </li>
        </ul>

    </div>

    <!-- 限时秒杀下 -->
    <div id="box3">
        <div class="left_box">
            <h2>限时秒杀</h2>
            <a href="#" class="iconfont">查看更多&#xe601;</a>
            <p>
                <span>每天0点场，好货秒不停</span>
                <em>05</em>
                <i>：</i>
                <em>20</em>
                <i>：</i>
                <em>48</em>
            </p>
        </div>
        <div class="right_top">
            <h2>品牌上新</h2>
            <span>9点整，抢大牌</span>
            <img src="images/mark_1.jpg" alt="">
        </div>
        <div class="right_bottom">
            <h2>日用好物</h2>
            <span>愿君多采撷</span>
            <img src="images/mark_2.jpg" alt="">
        </div>
    </div>

    <!-- 双11尖货预购 -->
    <div id="box4" class="clearfix">
        <hgroup>
        <h2>双11尖货预购</h2>
        <h3>畅购全球</h3>
        </hgroup>
        <div class="goods">
            <a href="#">
                <img src="images/shop.jpg" alt="">
                <span>热卖爆品</span>
            </a>
            <a href="#">
                <img src="images/shop.jpg" alt="">
                <span>热卖爆品</span>
            </a>
            <a href="#">
                <img src="images/shop.jpg" alt="">
                <span>热卖爆品</span>
            </a>
            <a href="#">
                <img src="images/shop.jpg" alt="">
                <span>热卖爆品</span>
            </a>
        </div>

        <div class="goods">
            <a href="#">
                <img src="images/shop.jpg" alt="">
                <span>热卖爆品</span>
            </a>
            <a href="#">
                <img src="images/shop.jpg" alt="">
                <span>热卖爆品</span>
            </a>
            <a href="#">
                <img src="images/shop.jpg" alt="">
                <span>热卖爆品</span>
            </a>
            <a href="#">
                <img src="images/shop.jpg" alt="">
                <span>热卖爆品</span>
            </a>
        </div>

        <div class="goods">
            <a href="#">
                <img src="images/shop.jpg" alt="">
                <span>热卖爆品</span>
            </a>
            <a href="#">
                <img src="images/shop.jpg" alt="">
                <span>热卖爆品</span>
            </a>
            <a href="#">
                <img src="images/shop.jpg" alt="">
                <span>热卖爆品</span>
            </a>
            <a href="#">
                <img src="images/shop.jpg" alt="">
                <span>热卖爆品</span>
            </a>
        </div>

        <div class="goods">
            <a href="#">
                <img src="images/shop.jpg" alt="">
                <span>热卖爆品</span>
            </a>
            <a href="#">
                <img src="images/shop.jpg" alt="">
                <span>热卖爆品</span>
            </a>
            <a href="#">
                <img src="images/shop.jpg" alt="">
                <span>热卖爆品</span>
            </a>
            <a href="#">
                <img src="images/shop.jpg" alt="">
                <span>热卖爆品</span>
            </a>
        </div>
        
        
        
        
        
    </div>

    <!-- 底部 -->
    <div id="footer_box">
        <p class="cur">
            <span class="iconfont">&#xe63e;</span>
            <i>商城</i>
        </p>
        <p>
            <span class="iconfont">&#xe63e;</span>
            <i>分类</i>
        </p>
        <p>
            <span class="iconfont">&#xe63e;</span>
            <i>购物车</i>
        </p>
        <p>
            <span class="iconfont">&#xe63e;</span>
            <i>我</i>
        </p>
    </div>
</body>
</html>